<template>
    <n-layout style="height: 100vh" has-sider>
        <n-layout-header bordered class="framework-header" position="absolute" style="z-index: 10">
            <section style="display: flex; align-items: center">
                <div
                    @click="compControl.aside.collapsed = !compControl.aside.collapsed"
                    style="width: 2rem; height: 100%; margin-right: 0.75rem; cursor: pointer"
                    class="d-phone-only-important tw-flex tw-items-center">
                    <c_btn_hamburger :collapsed="compControl.aside.collapsed" />
                </div>

                <div class="header-section">
                    <img class="d-phone-none" src="/static/logo-512x-15.png" alt="icon" />
                    <h2 class="d-phone-none">Sea Archiver</h2>
                    <span
                        class="d-phone-none"
                        style="
                            border: 1px solid #00000030;
                            border-radius: 0.25rem;
                            height: 1rem;
                            line-height: 1rem;
                            font-size: 0.75rem;
                            padding: 0 3px;
                            margin-left: 3px;
                        ">
                        v{{ store.app.version }}
                    </span>
                </div>
            </section>
            <section style="display: flex; align-items: center">
                <n-space class="right-section">
                    <c_btn_restart />
                    <com_btnModal_taskCenter />
                    <com_btnModal_excutelog />
                    <c_btn_themeSwitch />
                    <com_btnModal_setting />
                </n-space>
            </section>
        </n-layout-header>
        <n-layout position="absolute" class="framework-body" has-sider>
            <!-- ----------移动端导航栏---------- -->
            <n-layout-sider
                bordered
                style="z-index: 10"
                collapse-mode="width"
                class="framework-aside d-phone-only"
                :collapsed="compControl.aside.collapsed">
                <n-menu
                    :value="compControl.aside.page_name"
                    :options="compControl.aside.menuOptions"
                    @update:value="compControl.aside.handleUpdateValue" />
            </n-layout-sider>
            <div
                id="framework-aside-mask"
                @click="compControl.aside.collapsed = true"
                class="d-phone-only"
                :class="!compControl.aside.collapsed ? 'active' : ''"></div>
            <!-- ----------桌面端导航栏---------- -->
            <n-layout-sider
                bordered
                collapse-mode="width"
                show-trigger
                class="framework-aside d-phone-none">
                <n-menu
                    :value="compControl.aside.page_name"
                    :options="compControl.aside.menuOptions"
                    @update:value="compControl.aside.handleUpdateValue" />
            </n-layout-sider>
            <n-layout content-style=" " :native-scrollbar="false" class="framework-content">
                <router-view />
            </n-layout>
        </n-layout>
        <n-layout-footer position="absolute" style="z-index: 9" class="framework-footer" bordered>
            城府路 0rem height
        </n-layout-footer>
    </n-layout>
</template>

<script setup lang="ts">
import { menuOptions } from '@/utils/menuOptions'
import c_btn_hamburger from '@/components/framework/c_btn_hamburger.vue'

import c_btn_restart from '@/components/framework/c_btn_restart.vue'
import c_btn_themeSwitch from '@/components/framework/c_btn_themeSwitch.vue'

import com_btnModal_taskCenter from '@/components/framework/com_btnModal_taskCenter.vue'
import com_btnModal_excutelog from '@/components/framework/com_btnModal_excutelog.vue'
import com_btnModal_setting from '@/components/framework/com_btnModal_setting.vue'

import { type MenuOption } from 'naive-ui'
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '@/utils/store'
const router = useRouter()
const store = useMainStore()
const compControl = reactive({
    aside: {
        collapsed: false,
        page_name: '',
        menuOptions: menuOptions,
        handleUpdateValue(key: string, item: MenuOption) {
            compControl.aside.page_name = key
        }
    }
})
onMounted(() => {
    compControl.aside.page_name = router.currentRoute.value.name as string
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
@use '@/components/framework/framework';
.framework-header {
    height: framework.$header_height;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    .header-section {
        display: flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        img {
            height: 2.25rem;
            margin-right: 0.25rem;
            border-radius: 100%;
            border: 1px solid #00a0ee50;
        }
        @media (max-width: 350px) {
            img {
                display: none;
            }
            font-size: 0.75rem;
        }
    }
    .right-section {
        gap: 4px !important;
        @media (max-width: 350px) {
            gap: 0 !important;
        }
    }
}
.framework-body {
    top: calc(framework.$header_height + 0px);
    bottom: framework.$footer_height;
    .framework-aside {
        @media (max-width: sea-viewport.$phone_max) {
            position: absolute;
            height: 100%;
            &.n-layout-sider--collapsed {
                max-width: 0 !important;
            }
        }
        :deep(.n-submenu-children .n-menu-item-content) {
            padding-left: 3rem !important;
        }
    }
    #framework-aside-mask {
        width: 100vw;
        height: calc(100vh - framework.$header_height);
        pointer-events: none;
        position: fixed;
        top: framework.$header_height;
        left: 0;
        transition: background-color 0.2s ease-in-out;
        z-index: 2;
        &.active {
            background-color: #00000030;
            pointer-events: all;
        }
    }
}
.framework-footer {
    height: framework.$footer_height;
}
</style>
<style lang="scss">
@use '@/components/framework/framework';
.framework-content {
    .home-page-contianer {
        $height: calc(framework.$framework_content_height);
        margin: 0.5rem;
        border: 1px solid #00000010;
        border-radius: 0.375rem;
        padding-bottom: 1em;
        min-height: $height;
        box-sizing: border-box;
    }
    .home-page-tabs {
        padding: 0 0.5rem;
        @for $i from 0 through 8 {
            &.tab-padding-#{$i} {
                .n-tab-pane {
                    padding: 0.125rem * $i 0;
                }
            }
        }
    }
}
</style>
